<template>
	<view class="background">
		<view
			v-if="shiftList.length === 0"
			style="display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center;">
			<text>暂无订单</text>
		</view>
		<scroll-view v-else class="scroll-view">
			<view 
				v-for="(shift, shiftIndex) in shiftList"
				:key="shiftIndex"
				@tap="toDetail(shift)"
				class="shift-item">
				<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
					<view class="router-info" style="">
						<text style="font-size: 36upx;">{{shift.fromCityName}}</text>
						<image src="../../static/icon_router_target.png" />
						<text style="font-size: 36upx;">{{shift.endCityName}}</text>
					</view>
					<view class="router-info" style="justify-content: space-between;">
						<text class="subTitle">{{shift.carNum}}</text>
						<text class="subTitle" style="color: #000000; font-size: 36upx;">{{shift.fromTime}}</text>
					</view>
				</view>
				<view style="padding: 10upx;background: #F3F4F5;border-radius: 20upx;margin: 20upx 0;">
					<view class="site-warp">
						<image src="../../static/icon_up_car.png"  style="width: 45upx; height: 45upx;"/>
						<view style="flex: 1;">
							<view style="flex-wrap: wrap; width: 100%;">
								<text 
									v-for="(stationUp, stationUpIndex) in shift.countStationMPVOS" 
									:key="stationUpIndex"
									space="ensp" 
									style="font-size: 36upx; line-height: 50upx; margin: 0 10upx;">
									{{`${stationUp.stationNameShort} ${stationUp.countSeat}人`}}
								</text>
							</view>					
						</view>	
					</view>
					<view class="site-warp">
						<image src="../../static/icon_dwon_car.png"  style="width: 45upx; height: 45upx;"/>
						<view style="flex: 1;">
							<view style="flex-wrap: wrap; width: 100%;">
								<text 
									v-for="(stationLower, stationLowerIndex) in shift.countOffStationMPVOS"
									:key="stationLowerIndex"
									space="ensp" 
									style="font-size: 36upx; line-height: 50upx; margin: 0 10upx;">
									{{`${stationLower.stationNameShort} ${stationLower.countSeat}人`}}
								</text>
							</view>					
						</view>	
					</view>
				</view>
				<view style="display: flex;justify-content: flex-end;">
					<view
						@click.stop="toDetail(shift)"
						class="rder_item_btn" style="border-color: #FF8103; color: #FFFFFF;">
						<text>查看乘客</text>
					</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var openid;
	import api from '../../api';
	export default {
		data() {
			return {
				shiftList: [],
			}
		},
		
		onLoad() {
			this.pageQueryByUserId();
		},
		
		methods: {
			async pageQueryByUserId() {
				const {code, data} = await api.route.pageQueryByUserId({
					startDate: `${this.getDate(-10)} 00:00:00`,
					endDate: `${this.getDate(10)} 23:59:59`,
					pageNo: 1,
					pageSize: 100,
				});
				if(code === 200) {
					this.shiftList = data?.list || [];
				}
			},
			
			toDetail({scheduleDetailId}){
				uni.navigateTo({
					url: `/pages/my/order-Schedule-detail?scheduleDetailId=${scheduleDetailId}`
				})
			},
			
			getDate(index) {
				let time = new Date().getTime()+parseInt(index)*86400000;
				let date= new Date(time).toLocaleString().replace(/\//g,'-').split(" ")[0].toString();
				return this.formatDate(time).substr(0,11);
			},
			
			formatDate(day) {
			  let date = new Date(day);
			  let YY = date.getFullYear() + '-'; 
			  let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			  let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			  let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			  let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			  let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
			  return YY + MM + DD +" "+hh + mm + ss;
			},
		}
	}
</script>

<style lang="scss">
	.background{
		background-color: #f0f0f0;
		height: 100%;
		.scroll-view {
			height: 100%;
		}
		.shift-item {
			padding: 20upx;
			margin: 10upx;
			background: #FFFFFF;
			border-radius: 16upx;
			.site-warp {
				background: #F3F4F5;
				// margin-top: 20upx;
				// border-radius: 16upx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 10upx;
				.site-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					text {
						font-size: 30rpx;
						line-height: 50upx;
						margin: 0 10upx;
					}
					image {
						width: 30upx;
						height: 30upx;
					}
				}
			}
			.router-info {
				display: flex;
				flex-direction: row;
				align-items: center;
				image {
					width: 40upx;
					height: 40upx;
					margin: 0 10upx;
				}
				.subTitle {
					color: #000000; 
					font-size: 36upx;
					margin: 20upx;
				}
			}
		}
	}
	
.rder_item_btn {
	width: 180upx;
	height: 70upx;
	background: #FF8103;
	border-radius: 16upx;
	border-style: solid;
	border-width: 1upx;
	line-height: 70upx;
	font-size: 34rpx;
	text-align: center;
	margin-left: 10upx;
}
</style>
